<template>
  <div class="content">
    <section class="company_wrap">
      <div class="company_title">
        <div class="company_title_avatar">
          <img src="../../assets/gudongxinxi.png" alt="">
          <p style="color:#666666;">浏览192</p>
        </div>
        <div class="company_title_text">
          <h4>阿里巴巴（中国）网络技术有限公司</h4>
          <p>913233945402348305</p>
          <el-tag :plain="true" @click="open1">曾用名</el-tag>
        </div>
        <div class="company_title_state">
          <el-tag color="#4BBE94">存续</el-tag>
          <p style="color:#F58E50;">A级纳税人</p>
          <p style="color:#666666;">2019-05-30</p>
        </div>
      </div>
      <div class="company_main">
        <div class="company_main_item">
          <span>法定代表人</span>
          <p><router-link to="/">马云</router-link></p>
        </div>
        <div class="company_main_item company_main_item_bor">
          <span>注册资本</span>
          <p>512233.00万元</p>
        </div>
        <div class="company_main_item">
          <span>成立日期</span>
          <p>1999-09-09</p>
        </div>
      </div>
      <div class="company_contact">
        <div class="company_contact_item">
          <span>注册地址：</span>
          <router-link to="/">四川成都锦江区699号</router-link>
        </div>
        <div class="company_contact_item">
          <span>通信地址：</span>
          <router-link to="/">四川成都锦江区699号</router-link>
        </div>
        <div class="company_contact_item">
          <span>联系电话：</span>
          <router-link to="/">四川成都锦江区699号</router-link>
        </div>
        <div class="company_contact_item">
          <span>联系邮箱：</span>
          <router-link to="/">四川成都锦江区699号</router-link>
        </div>
      </div>
    </section>
    <section class="company_item">
      <div class="company_item_box" @click.stop="toCategoryPage">
        <div class="company_item_box_wrap" @click.stop="toSearch">
          <div class="company_item_box_icon">
            <img src="../../assets/anquan.png" alt="">
            <span>2</span>
          </div>
          <p>工商信息</p>
        </div>
        <div class="company_item_box_wrap" @click.stop="toBranch">
          <div class="company_item_box_icon">
            <img src="../../assets/fenzhijigou.png" alt="">
            <span>2</span>
          </div>
          <p>分支机构</p>
        </div>
        <div class="company_item_box_wrap" @click.stop="toStockholder">
          <div class="company_item_box_icon">
            <img src="../../assets/gudongxinxi.png" alt="">
            <span>2</span>
          </div>
          <p>股东信息</p>
        </div>
        <div class="company_item_box_wrap" @click.stop="toStockduty">
          <div class="company_item_box_icon">
            <img src="../../assets/guquanchuzhi.png" alt="">
            <span>2</span>
          </div>
          <p>股权出质</p>
        </div>
        <div class="company_item_box_wrap" @click.stop="toTaxrating">
          <div class="company_item_box_icon">
            <img src="../../assets/shuiwupingji.png" alt="">
            <span>2</span>
          </div>
          <p>税务评级</p>
        </div>
        <!-- <div class="company_item_box_wrap" @click.stop="toInvestment"> -->
        <div class="company_item_box_wrap" @click="jump('/home/investment')">
          <div class="company_item_box_icon">
            <img src="../../assets/touzi004.png" alt="">
            <span>2</span>
          </div>
          <p>对外投资</p>
        </div>
        <div class="company_item_box_wrap" @click="jump('/home/financing')">
          <div class="company_item_box_icon">
            <img src="../../assets/guquanchuzhi.png" alt="">
            <span>2</span>
          </div>
          <p>融资项目</p>
        </div>
        <div class="company_item_box_wrap" @click="jump('/home/mortgage')">
          <div class="company_item_box_icon">
            <img src="../../assets/rzxm.png" alt="">
            <span>2</span>
          </div>
          <p>动产抵押</p>
        </div>
        <div class="company_item_box_wrap" @click="jump('/home/taxarrears')">
          <div class="company_item_box_icon">
            <img src="../../assets/dongchandiya.png" alt="">
            <span>2</span>
          </div>
          <p>欠税公告</p>
        </div>
        <div class="company_item_box_wrap">
          <div class="company_item_box_icon">
            <img src="../../assets/gonggaoxianxing.png" alt="">
            <span>2</span>
          </div>
          <p>法律诉讼</p>
        </div>
        <div class="company_item_box_wrap">
          <div class="company_item_box_icon">
            <img src="../../assets/shangbiaoxinxi.png" alt="">
            <span>2</span>
          </div>
          <p>商标信息</p>
        </div>
        <div class="company_item_box_wrap">
          <div class="company_item_box_icon">
            <img src="../../assets/zhuanli.png" alt="">
            <span>2</span>
          </div>
          <p>专利信息</p>
        </div>
        <div class="company_item_box_wrap">
          <div class="company_item_box_icon">
            <img src="../../assets/jiangli.png" alt="">
            <span>2</span>
          </div>
          <p>奖励信息</p>
        </div>

      </div>
    </section>
  </div>
</template>

<script>
export default {
  name:"home",
  data () {
    return {
      isBorder:false
    }
  },
  methods: {
    jump:function (msg) {
      this.$router.push(msg);
    },
    toSearch(){
      this.$router.push('/home/business')
    },
    toBranch(){
      this.$router.push('/home/branch')
    },
    toStockholder(){
      this.$router.push('/home/stockholder')
    },
    toStockduty(){
      this.$router.push('/home/stockduty')
    },
    toStockduty(){
      this.$router.push('/home/stockduty')
    },
    toTaxrating(){
      this.$router.push('/home/taxrating')
    },
    toCategoryPage(e){
      var tarType = e.target.localName;
      if( tarType == 'div' || tarType == 'img' || tarType == 'p'){
        // console.log(tarType)
      }
      
      
    },
    open1() {
      this.$message('这是一条消息提示');
    },
  }
}
</script>

<style scoped>
.content{
  background: #F8F8F8;
}
.company_wrap{
  background: #fff;
}
.company_title{
  padding: 32px 24px;
  display: flex;
  justify-content: space-between;
}
/* .company_title_avatar{
}
.company_title_avatar img{
  
} */
.company_title_text{
  text-align: left;
  width: 60%;
}
.company_title_text h4{
  font-size: 24px;
}
.company_title_text span{
  color:#000;
  border:none;
  background:#F7F7F7;
  margin-top: 32px;
}
.company_title_state{
  text-align: right;
}
.company_title_avatar p ,.company_title_text p, .company_title_state p{
  margin-top: 32px;
  font-size: 16px;
}
.company_title_state span{
  color: #fff;
  border: none;
  padding: 0 0.25rem;
}
.company_main{
  padding: 0 24px 24px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.company_main_item{
  width: 33.3%;
  text-align: center;
}
.company_main_item_bor{
  border-left:1px solid #DDDDDD;
  border-right:1px solid #DDDDDD; 
}
.company_main_item span{
  color: #666666;
}
.company_main_item p{
  margin-top: 24px;
}
.company_contact{
  padding: 24px;
  border-top: 1px solid #eaeefb;
}
.company_contact_item{
  margin: 16px 0;
  display: flex;
  justify-content: left;
}
.company_contact_item span{
  color: #666666;
  letter-spacing: 4px;
}
.company_contact_item a{
  width: 76%;
}
.company_item{
  background: #fff;
  margin-top: 24px;
}
.company_item_box{
  padding: 24px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content:flex-start;
}
.company_item_box_wrap{
  width: 33.3%;
  margin: 24px 0;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}
.company_item_box_bor{
  border-left:1px solid #DDDDDD;
  border-right:1px solid #DDDDDD; 
}
.company_item_box_icon{
  position: relative;
  margin-bottom: 12px;
}
/* .company_item_box_icon img{
  width: 72px;
  height: 72px;
} */
.company_item_box_icon span{
  position: absolute;
  top: -16px;
  right: -16px;
  color: #4B77BE;
}
</style>
